<template>
  <div class="content">
    <div class="content-box">
      <!-- 登录表单 -->
      <div class="content-login">
        <div class="content-login-info">
          <div class="content-title">登录</div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px">
            <!-- 用户名输入框 -->
            <el-form-item label="用户名" prop="username" class="form-item">
              <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <!-- 密码输入框 -->
            <el-form-item label="密码" prop="password" class="form-item">
              <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <!-- 单选按钮 -->
            <el-form-item prop="userType" class="form-item">
              <el-radio-group v-model="loginForm.userType">
                <el-radio label="1">中央工厂用户</el-radio>
                <el-radio label="2">连锁店用户</el-radio>
                <el-radio label="0">管理员</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <!-- <div class="radio">
            <el-radio-group v-model="loginForm.radio">
                <el-radio label="factory">中央工厂用户</el-radio>
                <el-radio label="chain">连锁店用户</el-radio>
                <el-radio label="admin">管理员</el-radio>
              </el-radio-group>
          </div> -->
          <!-- 登录按钮 -->
          <el-button style="margin-left: 40%;margin-top: 20px;" type="primary" @click="loginBtn">登录</el-button>
          <div class="content-bottom">
            <div @click="topassword">忘记密码？</div>
            <div @click="toregister">注册</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import request from "../utils/request.js"

export default {
  data() {
    return {
      loginForm: {
        userName: "",
        userPassword: "",
        userTag: '1', // 默认选择中央工厂用户
      },
      loginRules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userType: [{ required: true, message: "请选择用户类型", trigger: "blur" }],
      },
    };
  },
  methods: {
    loginBtn() {
      this.$refs.loginForm.validate().then(() => {
        // 表单验证通过
        // 发送登录请求到后端接口
        //
        axios.post("http://localhost:8080/login", {
          userName: this.loginForm.username,
          userPassword: this.loginForm.password,
          userTag: this.loginForm.userType
        }).then(response => {

          // 登录成功
          const res = response.data; // 获取响应数据
          if (res.status === 200) { // 检查状态码是否为成功
            
            this.$message.success('登录成功！');
            // const token = res.data; // 获取 token 数据
            const { token, userTag, username } = res.data; // 后端返回的数据
            const userInfo = { token, userTag, username }; 

            this.$store.commit('user/setUserInfo',userInfo)
            console.log()
            // localStorage.setItem("token", token); // 将 token 存入 本地 中

            this.$router.push("/Layout/ChainStoreInfo"); // 重定向到其他页面
          } else {
            this.$message.error(res.message); // 登录失败，根据后端返回的错误信息进行提示
          }
        }).catch(error => {
          // 发生网络错误或其他异常
          console.error("登录请求失败：", error);
          this.$message.error("登录失败，请稍后重试！");
        });
      }).catch(error => {
        // 表单验证未通过
        console.error("表单验证失败：", error);
        this.$message.error("请输入正确的用户名、密码和用户类型！");
      });
    },

    toregister() {
      // 实现跳转到注册页面的事件
      this.$router.push({ name: 'Register' })
    },
    topassword() {
      this.$message.error('该功能还在测试阶段!');
    }
  }
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100vh;
  /* background-image: url("../assets/imgs/LoginBackground.jpg"); */
  background-image: url(@/assets/LoginBackground.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-title {
  text-align: center;
  font-size: 25px;
  color: #fff;
  margin-bottom: 20px;
}

.content-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 350px;
  /* padding: 20px; */
  background: rgba(255, 255, 255, 0.61);
  border-radius: 5px;
  box-shadow: 0 25px 35px rgba(0, 0, 0, 0.8);

}

.content-login-info {
  width: 90%;
}

.content-bottom {
  display: flex;
  justify-content: space-between;
  color: blue;
  font-size: 14px;
}

.content-bottom :hover {
  cursor: pointer;
}

/* .el-form-item__label {
  color: black !important;
}

.el-input__inner {
  color: black !important;
}
.radio .el-radio {
  color: black;
} */
</style>
